<template>
  <div class="interest-calculator">
    <!-- 输入区域 -->
    <el-card class="mb-20">
      <template #header>
        <div class="card-header">
          <span>存款利息计算器</span>
        </div>
      </template>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="12">
          <el-form-item label="存款金额">
            <el-input v-model="principal" type="number" placeholder="请输入存款金额">
              <template #append>元</template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12">
          <el-form-item label="年利率">
            <el-input v-model="rate" type="number" placeholder="请输入年利率">
              <template #append>%</template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12">
          <el-form-item label="存款年限">
            <el-input v-model="years" type="number" placeholder="请输入存款年限">
              <template #append>年</template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12">
          <el-form-item label="计息方式">
            <el-select v-model="interestType" class="w-full">
              <el-option v-for="item in interestTypes" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-button type="primary" class="w-full mt-20" @click="calculateInterest">计算</el-button>
    </el-card>

    <!-- 计算结果展示 -->
    <el-card v-if="showResult" class="mb-20">
      <template #header>
        <div class="card-header">
          <span>计算结果</span>
        </div>
      </template>

      <el-table :data="yearlyResults">
        <el-table-column label="年份" prop="year">
          <template #default="{ row, $index }">第 {{ $index + 1 }} 年</template>
        </el-table-column>
        <el-table-column label="期初本金">
          <template #default="{ row }">
            {{ formatMoney(row.startingAmount) }}
          </template>
        </el-table-column>
        <el-table-column label="年度利息">
          <template #default="{ row }">
            {{ formatMoney(row.interest) }}
          </template>
        </el-table-column>
        <el-table-column label="期末本息合计">
          <template #default="{ row }">
            {{ formatMoney(row.endingAmount) }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 计算公式说明 -->
    <el-card class="mb-20">
      <template #header>
        <div class="card-header">
          <span>计算公式说明</span>
        </div>
      </template>

      <div class="formula-section">
        <h3>单利计算公式：</h3>
        <p>利息 = 本金 × 年利率 × 年限</p>
        <p>本息和 = 本金 + 利息</p>
      </div>
      <div class="formula-section">
        <h3>复利计算公式：</h3>
        <p>本息和 = 本金 × (1 + 年利率)^年限</p>
        <p>利息 = 本息和 - 本金</p>
      </div>
    </el-card>

    <!-- 历史记录 -->
    <el-card>
      <template #header>
        <div class="card-header">
          <span>计算历史记录</span>
          <el-button type="danger" @click="clearHistory">清空历史</el-button>
        </div>
      </template>

      <el-timeline>
        <el-timeline-item v-for="(record, index) in history" :key="index" :timestamp="record.date">
          <div class="history-item">
            <div>本金：{{ formatMoney(record.principal) }}</div>
            <div>利率：{{ record.rate }}%</div>
            <div>年限：{{ record.years }}年</div>
            <div>本息合计：{{ formatMoney(record.total) }}</div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const principal = ref(10000);
const rate = ref(2.75);
const years = ref(1);
const interestType = ref('复利');
const interestTypes = ['单利', '复利'];
const showResult = ref(false);
const yearlyResults = ref([]);
const history = ref([]);

onMounted(() => {
  // 从本地存储加载历史记录
  const savedHistory = localStorage.getItem('interestCalculatorHistory');
  if (savedHistory) {
    history.value = JSON.parse(savedHistory);
  }
});

const calculateInterest = () => {
  yearlyResults.value = [];
  let currentAmount = principal.value;

  for (let year = 1; year <= years.value; year++) {
    let yearlyInterest = 0;
    let endingAmount = 0;

    if (interestType.value === '单利') {
      yearlyInterest = principal.value * (rate.value / 100);
      endingAmount = principal.value + yearlyInterest * year;
    } else {
      endingAmount = currentAmount * (1 + rate.value / 100);
      yearlyInterest = endingAmount - currentAmount;
    }

    yearlyResults.value.push({
      startingAmount: currentAmount,
      interest: yearlyInterest,
      endingAmount
    });

    currentAmount = endingAmount;
  }

  showResult.value = true;
  saveToHistory();
};

const saveToHistory = () => {
  const record = {
    principal: principal.value,
    rate: rate.value,
    years: years.value,
    total: yearlyResults.value[yearlyResults.value.length - 1].endingAmount,
    date: new Date().toLocaleString(),
    type: interestType.value
  };

  history.value.unshift(record);
  if (history.value.length > 10) {
    history.value.pop();
  }

  localStorage.setItem('interestCalculatorHistory', JSON.stringify(history.value));
};

const clearHistory = () => {
  history.value = [];
  localStorage.removeItem('interestCalculatorHistory');
};

const formatMoney = value =>
  new Intl.NumberFormat('zh-CN', {
    style: 'currency',
    currency: 'CNY'
  }).format(value);
</script>

<style scoped>
.interest-calculator {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.w-full {
  width: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.formula-section {
  margin-bottom: 20px;
}

.formula-section h3 {
  color: var(--el-text-color-regular);
  margin-bottom: 10px;
  font-size: 16px;
}

.formula-section p {
  margin: 5px 0;
  color: var(--el-text-color-primary);
}

.history-item {
  padding: 10px;
  background-color: var(--el-bg-color-page);
  border-radius: 4px;
}

.history-item div {
  margin: 5px 0;
}
</style>
